// @ts-nocheck
import React, { Component } from 'react';
import './index.css'

// 创建
const MyContext = React.createContext ()
const {Provider, Consumer} = MyContext

class A extends Component {

  state = {username: 'tom', age: 18}
  
  render() {
    const {username, age} = this.state
    return (
      <div className='parent'>
        <h2>A组件</h2>
        <h4>用户名： {username}</h4>
        <Provider value={{username, age}}>
          <B/>
        </Provider>
        
      </div>
    );
  }
}


class B extends Component {
  render() {
    return (
      <div className='child'>
        <h2>B组件</h2>
        {/* <h4>从A组件接收到的用户名： {this.props.username}</h4> */}
        <C></C>
      </div>
    );
  }
}

// class C extends Component {
//   static contextType = MyContext
//   render() {
//     // console.log (this)
//     return (
//       <div className='grand'>
//         <h2>C组件</h2>
//         <h4>从A组件接收到的用户名：{this.context.username} </h4>
//       </div>
//     );
//   }
// }

function C () {
  return (
    <div className='grand'>
        <h2>C组件</h2>
        <h4>从A组件接收到的用户名：
          <Consumer>
            {
              value => {
                return `${value.username}, 年龄是：${value.age}`
              }
            }
          </Consumer>
        </h4>
      </div>
  )
}



export default A;
